<style>
    * {
        padding: 0;
        margin: 0;
        font-color: black;
    }

    .icon-white {
        color: white;
        margin-top: 5px;
    }
</style>

<body>
<nav class="navbar  navbar-fixed-top" role="navigation" style="background-color:dodgerblue;padding: 10px;margin: 0">
    <h4 class="col-xs-8" href="#" role="button" style="color: white;">我的</h4>
    <i class="fa fa-bell-o fa-2x col-xs-2 icon-white"></i>
    <i class="fa fa-cog fa-2x col-xs-2 icon-white"></i>
</nav>
<div class="row" style="height:100px;background-color:dodgerblue;margin-top:59px;padding: 0 5%">
    <img class="col-xs-3" src="{{user.headimage}}" height="90px" width="90px"  >
    <h2 class="col-xs-6" style="color:white" style="margin: 0">{{user.name}}</h2>
    <h4 class="col-xs-6" style="color:white">{{user.mobile}}</h4>
    <i class="col-xs-3 fa fa-angle-right fa-3x icon-white" style="margin-top:-30px"></i>
</div>
<div class="row" style="position:relative;height:130px;border-bottom:10px solid #F2F2F2;">
    <div class="col-xs-4" style="height:110px;border-right:2px solid Gainsboro">
        <h3 style="color:orange;margin-left:20px;margin-top:30px;">0.00元</h3>
        <h4 style="color:black;margin-left:20px;">账户余额</h4>
    </div>
    <div class="col-xs-4" style="height:110px;border-right:2px solid Gainsboro">
        <h3 style="color:red;margin-left:30px;margin-top:30px;">0个</h3>
        <h4 style="color:black;margin-left:18px;">我的红包</h4>
    </div>
    <div class="col-xs-4" style="height:110px;position:relative;">
        <h3 style="color:green;margin-left:10px;margin-top:30px;">0</h3>
        <h4 style="color:black;margin-left:12px;">我的积分</h4>
        <h5 style="color:green;position:absolute;left:73%;top:28px;">分</h5>
    </div>
</div>
<div class="col-xs-12" style="padding:0;height:170px;position:relative;border-bottom:10px solid #F2F2F2;">
    <div class="col-xs-12" style="height:50px;margin-left:0;border-bottom:1px solid Gainsboro" ng-click="address()">
        <img src="../img/shouhuodizhiimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">收货地址</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
    <div class="col-xs-12" style="height:50px;margin-left:0;border-bottom:1px solid Gainsboro">
        <img src="../img/wodeshoucangimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">我的收藏</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
    <div class="col-xs-12" style="height:50px;margin-left:0;">
        <img src="../img/meishixiangceimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">美食相册</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
</div>
<div class="col-xs-12" style="padding:0;height:170px;position:relative;border-bottom:10px solid #F2F2F2;">
    <div class="col-xs-12" style="height:50px;margin-left:0;">
        <img src="../img/tuijianyoujiangimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">推荐有奖</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
    <div class="col-xs-12" style="height:50px;margin-left:0;border-bottom:1px solid Gainsboro">
        <img src="../img/jifenshangchengimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">积分商城</h3>
        <h5 style="position:absolute;left:60%;top:9px;">0元好物在这里！</h5>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
    <div class="col-xs-12" style="height:50px;margin-left:0;">
        <img src="../img/elemehuiyuankaimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">饿了么会员卡</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
</div>
<div class="col-xs-12" style="padding:0;height:170px;position:relative;border-bottom:10px solid #F2F2F2;">
    <div class="col-xs-12" style="height:50px;margin-left:0;border-bottom:1px solid Gainsboro">
        <img src="../img/fuwuzhongxinimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">服务中心</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
    <div class="col-xs-12" style="height:50px;margin-left:0;border-bottom:1px solid Gainsboro">
        <img src="../img/huanyingpingfenimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">欢迎评分</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
    <div class="col-xs-12" style="height:50px;margin-left:0;border-bottom:1px solid Gainsboro">
        <img src="../img/woshishangjiaimg.jpg" width="50px" height="50px"
             style="height:50px;float:left;margin-left:0;border-bottom:1px solid Gainsboro">
        <h3 style="color:black;position:absolute;left:18%;bottom:0;">我是商家</h3>
        <img src="../img/jiantou_gray.jpg" width="50px" height="48px" style="position:absolute;left:88%;top:1px;">
    </div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" style="height: 50px;">
    <div class="container-fluid bg-primary">
        <div class="col-xs-3 icon" role="button" ng-click="goPage(1)">
            <div>
                <img src="../img/hanbao.png" width="20px" height="20px"/>
                <p style="color:white">外卖</p>
            </div>
        </div>
        <div class="col-xs-3 icon" role="button" ng-click="goPage(2)">
            <div>
                <img src="../img/caidan.png" width="20px" height="20px"/>
                <p style="color:white">订单</p>
            </div>
        </div>
        <div class="col-xs-3 icon" role="button" ng-click="goPage(3)">
            <div>
                <img src="../img/faxian.png" width="20px" height="20px"/>
                <p style="color:white">发现</p>
            </div>
        </div>
        <div class="col-xs-3 icon" role="button">
            <div>
                <img src="../img/wode.png" width="20px" height="20px"/>
                <p style="color:white">账户</p>
            </div>
        </div>
    </div>
</nav>
</body>
